<template>
    <div class="white-block box full" v-loading="loading">
        <breadcrumb :title="'儿科（1-7病区）'" :noBack="true"></breadcrumb>
        <div class="legend mt10">
            <div><i></i>患者</div>
            <div><i class="len1"></i>陪护人员</div>
            <div><i class="len2"></i>探视人员</div>
        </div>
        <div class="map-img mt20">
            <el-image
                fit="contain"
                src="/static/images/map.png"
                class="img">
            </el-image>
            <div class="map-list">
                <div class="room room1" @click="$router.push($route.path+'/detail')">
                    <div class="patient">2个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room room2">
                    <div class="patient">2个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">2个探视</div>
                </div>
                <div class="room room3">
                    <div class="patient">1个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">0个探视</div>
                </div>
                <div class="room room4">
                    <div class="patient">2个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">0个探视</div>
                </div>
                <div class="room room5">
                    <div class="patient">1个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room room6">
                    <div class="patient">1个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room room7">
                    <div class="patient">1个患者</div>
                    <div class="escort">2个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room room8">
                    <div class="patient">1个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room room9">
                    <div class="patient">2个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">0个探视</div>
                </div>
                <div class="room room10">
                    <div class="patient">1个患者</div>
                    <div class="escort">0个陪护</div>
                    <div class="visitor">0个探视</div>
                </div>

                <div class="room lg room11">
                    <div class="patient">1个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room lg room12">
                    <div class="patient">2个患者</div>
                    <div class="escort">2个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room lg room13">
                    <div class="patient">1个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room lg room14">
                    <div class="patient">1个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room lg room15">
                    <div class="patient">1个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room lg room16">
                    <div class="patient">1个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room lg room17">
                    <div class="patient">1个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
                <div class="room lg room18">
                    <div class="patient">1个患者</div>
                    <div class="escort">1个陪护</div>
                    <div class="visitor">1个探视</div>
                </div>
            </div>
        </div>
        <transition name="slide">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    import breadcrumb from '../components/breadcrumb'

    export default {
        data() {
            return {
                loading: false
            }
        },
        mounted() {
        },
        methods: {},
        components: {
            breadcrumb
        }
    }
</script>

<style scoped lang="less">
    .content {
    }

    .legend {
        > div {
            display: inline-block;
            line-height: 20px;
            margin-right: 40px;

            i {
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                overflow: hidden;
                background-color: #538CFF;
                box-shadow: 0 0 4px 0 #538CFF;
                margin-right: 5px;

                &.len1 {
                    background-color: #53FFF0;
                    box-shadow: 0 0 4px 0 #5DD2C8;
                }

                &.len2 {
                    background-color: #B96CFF;
                    box-shadow: 0 0 4px 0 #D6A9FF;
                }
            }

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .map-img {
        padding: 0 20px;
        width: 1200px;
        height: 642px;
        position: relative;

        .map-list {
            position: absolute;
            top: 0;
            left: 20px;
            right: 20px;
            bottom: 0;

            .room {
                position: absolute;
                top: 0;
                left: 0;
                width: 91px;
                height: 125px;
                cursor: pointer;
                font-size: 12px;

                .patient, .escort, .visitor {
                    position: absolute;
                    top: 10px;
                    left: 30px;
                    line-height: 20px;
                    color: #999;
                }

                .escort {
                    top: 44px;
                }

                .visitor {
                    top: 76px;
                }

                &.lg {
                    width: 130px;
                    height: 125px;

                    .patient, .escort, .visitor {
                        width: 90px;
                        text-align: center;
                    }
                }
            }

            .room1 {
                top: 9px;
                left: 12px;
            }

            .room2 {
                top: 144px;
                left: 12px;
            }

            .room3 {
                top: 347px;
                left: 13px;
            }

            .room4 {
                top: 347px;
                left: 124px;
            }

            .room5 {
                top: 9px;
                left: 553px;
            }

            .room6 {
                top: 144px;
                left: 553px;
            }

            .room7 {
                top: 98px;
                left: 750px;
            }

            .room8 {
                top: 98px;
                left: 852px;
            }

            .room9 {
                top: 98px;
                left: 953px;
            }

            .room10 {
                top: 98px;
                left: 1054px;
            }

            .room11 {
                top: 501px;
                left: 10px;
            }

            .room12 {
                top: 501px;
                left: 155px;
            }

            .room13 {
                top: 501px;
                left: 300px;
            }

            .room14 {
                top: 501px;
                left: 445px;
            }

            .room15 {
                top: 501px;
                left: 590px;
            }

            .room16 {
                top: 501px;
                left: 735px;
            }

            .room17 {
                top: 501px;
                left: 880px;
            }

            .room18 {
                top: 501px;
                left: 1025px;
            }
        }
    }
</style>
